<template>
  <div>
    <CloudMenu mode="inline" :open-keys="openKeys" style="width: 256px" @openChange="onOpenChange">
      <CloudSubMenu key="sub1">
        <span slot="title"><CloudIcon type="mail" /><span>Navigation One</span></span>
        <CloudMenuItem key="1">
          Option 1
        </CloudMenuItem>
        <CloudMenuItem key="2">
          Option 2
        </CloudMenuItem>
        <CloudMenuItem key="3">
          Option 3
        </CloudMenuItem>
        <CloudMenuItem key="4">
          Option 4
        </CloudMenuItem>
      </CloudSubMenu>
      <CloudSubMenu key="sub2">
        <span slot="title"><CloudIcon type="appstore" /><span>Navigation Two</span></span>
        <CloudMenuItem key="5">
          Option 5
        </CloudMenuItem>
        <CloudMenuItem key="6">
          Option 6
        </CloudMenuItem>
        <CloudSubMenu key="sub3" title="Submenu">
          <CloudMenuItem key="7">
            Option 7
          </CloudMenuItem>
          <CloudMenuItem key="8">
            Option 8
          </CloudMenuItem>
        </CloudSubMenu>
      </CloudSubMenu>
      <CloudSubMenu key="sub4">
        <span slot="title"><CloudIcon type="setting" /><span>Navigation Three</span></span>
        <CloudMenuItem key="9">
          Option 9
        </CloudMenuItem>
        <CloudMenuItem key="10">
          Option 10
        </CloudMenuItem>
        <CloudMenuItem key="11">
          Option 11
        </CloudMenuItem>
        <CloudMenuItem key="12">
          Option 12
        </CloudMenuItem>
      </CloudSubMenu>
    </CloudMenu>
  </div>
</template>
<script>
export default {
  title: '4.只展开当前父级菜单',
  data() {
    return {
      rootSubmenuKeys: ['sub1', 'sub2', 'sub4'],
      openKeys: ['sub1'],
    };
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(key => this.openKeys.indexOf(key) === -1);
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
  },
};
</script>